<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>考场管理-清除指定考场和学生</title>
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style type="text/css">
        #test1{
            /*border: 1px solid red;*/
            width: 1320px;
            height: 600px;
            margin-top: 10px;
            margin-left: 10px;
            display: flex;
        }
        #test1 .table-search-fieldset{
            border: 1px solid black;
            width: 500px;
            height: 585px;
        }
        #test1 .table-search-fieldset:nth-child(1){
            margin-left: 15px;
        }
        #test1 .table-search-fieldset:nth-child(2){
            margin-left: 80px;
        }
        #test2{
            margin-top: 10px;
            border: 1px solid black;
            height: 450px;
            width: 500px;
        }
        #test3{
            margin-top: 48px;
            border: 1px solid black;
            width: 500px;
            height: 450px;
        }
        #btn-reset,#btn-reset2{
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<div id="test1">
    <fieldset class="table-search-fieldset">
        <legend>选择机房</legend>
        <form class="layui-form">
            <div class="layui-inline" style="display: flex">
                <div class="layui-input-inline" style="width: 150px;margin-left: 35px">
                    <select id="course" name="cname">
                        <option value="">请选择</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 250px;margin-left: 15px">
                    <select id="room" name="roomaddr">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
        </form>
        <div id="test2">
            <table id="table-booklist" lay-filter="table-booklist-filter"></table>
        </div>
        <button id="btn-reset" class="layui-btn layui-btn-radius layui-btn-sm">
            <i class="layui-icon layui-icon-fonts-clear"></i>
            清除指定考场
        </button>
    </fieldset>
    <fieldset class="table-search-fieldset">
        <legend>考生列表</legend>
        <div id="test3">
            <table id="table-booklist1" ></table>
        </div>
        <div>
            <button id="btn-reset2" class="layui-btn layui-btn-radius layui-btn-sm">
                <i class="layui-icon layui-icon-fonts-clear"></i>
                清除指定考生
            </button>
        </div>
    </fieldset>
</div>

<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/jquery-3.6.0.min.js}" charset="utf-8"></script>
<script th:inline="javascript">
    layui.use(['form','table','layer'], function(){
        var form = layui.form;
        var $ = layui.$;
        var table=layui.table;
        var layer=layui.layer;

        var datas;

        form.render();
        form.on('select',function (data) {
            // console.log(data.value)
            // document.getElementById("test2").innerText=data.value;
            var cname=$("#course option:selected").text();
            var roomAddr=data.value;
            if(cname!=roomAddr){
                var str="cname="+cname+"&roomAddr="+roomAddr;
                // console.log(str);
                //加载左边的考试信息
                table.render({
                    elem: '#table-booklist',
                    url:'/ClearRoomStu?'+str,
                    cols:[
                        [
                            {type:"checkbox",width: 70},
                            {field: 'erordId', title: '考场编号',width:102,unresize:true,align:'center'},
                            {field: 'examDate', title: '考试日期',width:102,unresize:true,align:'center',
                                templet:function (d){
                                    str=d.examDate.replace(/-/g,"/");
                                    var dates=new Date(str);
                                    return dates.toLocaleDateString();
                                }
                            },
                            {field: 'estartTime', title: '开始',width:102,unresize:true,align:'center',
                                templet:function (d){
                                    str=d.estartTime.replace(/-/g,"/");
                                    var dates=new Date(str);
                                    return dates.toLocaleTimeString();
                                }
                            },
                            {field: 'eendTime', title: '结束',width:102,unresize:true,align:'center',
                                templet:function (d){
                                    str=d.eendTime.replace(/-/g,"/");
                                    var dates=new Date(str);
                                    return dates.toLocaleTimeString();
                                }
                            },
                        ]
                    ]
                });
                //选中左边的行右边显示考试学生信息
                table.on('row(table-booklist-filter)', function(obj){
                    datas=obj.data;
                    console.log(datas);
                    let str="examDate="+datas.examDate+"&erordId="+datas.erordId+"&etype="+datas.etype;
                    table.render({
                        elem: "#table-booklist1",
                        url:'/ClearRoomStuR?'+str,
                        width:500,
                        height:440,
                        cols:[
                            [
                                {type:"checkbox",width: 70},
                                {field: 'stuId', title: '学号',width:125,unresize:true,align:'center'},
                                {field: 'stuName', title: '姓名',width:95,unresize:true,align:'center'},
                                {field: 'teaName', title: '教师',width:95,unresize:true,align:'center'},
                                {field: 'campus', title: '校区',width:102,unresize:true,align:'center',
                                    templet:function (d) {
                                        if(d.campus=='1') return '花津校区';
                                        if(d.campus=='2') return '赭山校区';
                                        if(d.campus=='3') return '天门山校区';
                                    }
                                },
                            ]
                        ]
                    });
                    //标注选中样式
                    obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
                });
            }
        });

        //清除指定学生
        $("#btn-reset2").click(function () {
            //右边选中数据
            var checkStatus = table.checkStatus('table-booklist1');
            console.log(checkStatus.data);
            //右边列表选中id
            var idArr=new Array();
            $(checkStatus.data).each(function () {
                idArr.push(this.stuId);
            });
            // console.log(idArr.join(","));
            let str=idArr.join(",");
            console.log($("#course option:selected").text());
            console.log(datas);
            console.log(checkStatus.data.length)

            layer.confirm('您确认清除所选学生信息吗?', {icon: 3, title:'清除确认'}, function(index){
                $.ajax({
                    url:"/clearStu",
                    data:{
                        "ids":str,
                        "cname":$("#course option:selected").text(),
                        "erordId":datas.erordId,
                        "examDate":datas.examDate,
                        "cnt":checkStatus.data.length
                    },
                    success:function (res) {
                        if(res.code==200){
                            layer.msg("清除学生成功！",{
                                icon: 1,
                                time: 1000
                            },function () {
                                window.location.reload();
                            });
                        }else {
                            layer.alert("清除失败！",{icon:2,anim:6});
                        }
                    }
                });
                layer.close(index);
            });
        });

        //清除指定考场
        $("#btn-reset").click(function () {
            //右边选中数据
            var checkStatus = table.checkStatus('table-booklist');
            let eRorders=checkStatus.data;
            console.log(eRorders);
            console.log(JSON.stringify(eRorders));
            layer.confirm('您确认清除所选考场信息吗?', {icon: 3, title:'清除确认'}, function(index){
                $.ajax({
                    url:"/clearRoomStu",
                    data:JSON.stringify(eRorders),
                    dataTypes:"json",
                    type:"post",
                    contentType:"application/json",
                    success:function (res) {
                        if(res.code==200){
                            layer.msg("清除学生成功！",{
                                icon: 1,
                                time: 1000
                            },function () {
                                window.location.reload();
                            });
                        }else {
                            layer.alert("清除失败！",{icon:2,anim:6});
                        }
                    }
                });
                layer.close(index);
            });
        });
    });

    //加载课程名
    var course=[[${cname}]]
    for(let i=0;i<course.length;i++){
        $("#course").append(
            '<option value="'+course[i]+'">'+course[i]+'</option>'
        )
    }

    //加载机房地址
    var roomAddr=[[${roomAddr}]]
    for(let i=0;i<roomAddr.length;i++){
        $("#room").append(
            '<option value="'+roomAddr[i]+'">'+roomAddr[i]+'</option>'
        )
    }
</script>
</body>
</html>